import React from 'react';
import {Card, Button, notification} from 'antd';
import './ui.less';

export default class Notice extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {

    return (
      <div>
        <Card title="通知提醒框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleNotification("success")}>Success</Button>
          <Button type="default" onClick={() => this.handleNotification("info")}>Info</Button>
          <Button type="default" onClick={() => this.handleNotification("warning")}>Warning</Button>
          <Button type="danger" onClick={() => this.handleNotification("error")}>Error</Button>
        </Card>

        <Card title="指定位置的通知提醒框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleNotification("success", "topLeft")}>Success</Button>
          <Button type="default" onClick={() => this.handleNotification("info", "topRight")}>Info</Button>
          <Button type="default" onClick={() => this.handleNotification("warning", "bottomLeft")}>Warning</Button>
          <Button type="danger" onClick={() => this.handleNotification("error", "bottomRight")}>Error</Button>
        </Card>
      </div>
    );
  }

  handleNotification = (type, direction) => {
    if (direction) {
      // 全局配置
      notification.config({
        placement: direction,
      });
    }
    notification[type]({
      message: 'React',
      description: 'Welcome to use React!',
    });
  }
}